<script setup lang="ts">
import { reactive } from 'vue';
import MeetingAppointmentList from './components/meeting-appointment-list.vue';
import VisitorAppointmentList from './components/visitor-appointment-list.vue';
const state: {
  currentTab: string;
} = reactive({
  currentTab: 'meeting',
});

const components = {
  meeting: MeetingAppointmentList,
  visitor: VisitorAppointmentList,
};
</script>

<template>
  <view class="my-appointment app-page--1">
    <app-navbar title="我的预约" />
    <nut-tabs v-model="state.currentTab">
      <nut-tab-pane title="会议预约" pane-key="meeting" />
      <nut-tab-pane title="访客预约" pane-key="visitor" />
    </nut-tabs>
    <component :is="components[state.currentTab]" :key="'my-appointment-' + state.currentTab" />
  </view>
</template>

<style lang="scss">
.my-appointment {
  .nut-tabs {
    &__content {
      display: none;
    }
  }
}
</style>
